<template>
	<view class="container">
		<view class="apps-grid">
			<view class="app-card" v-for="app in apps" :key="app.name" @click="navigateTo(app.path)">
				<view class="app-icon-container">
					<image :src="app.icon" mode="aspectFit" class="app-icon"></image>
				</view>
				<text class="app-name">{{app.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apps: [{
						name: '商城',
						icon: '/static/apps-shop.png',
						path: '/pages/shop/index'
					},
					{
						name: '通讯录',
						icon: '/static/apps-txl.png',
						path: '/pages/contacts/index'
					},
					{
						name: '知识库',
						icon: '/static/apps-know.png',
						path: '/pages/knowledge/index'
					}
				]
			};
		},
		methods: {
			navigateTo(path) {
				uni.navigateTo({
					url: path
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 40rpx;
		background-color: #f8f8f8;
		// min-height: 100vh;
	}

	.apps-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40rpx;
	}

	.app-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		}
	}

	.app-icon-container {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
		border-radius: 24rpx;
		margin-bottom: 20rpx;
	}

	.app-icon {
		width: 80rpx;
		height: 80rpx;
	}

	.app-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
</style>